<template>
  <c-dialog ref="dialog" width="65vw" title="批量上传合同" @close="closeHandle">
    <c-table-box checkbox :data="tableData" hide-func :table-config="tableConfig" @selection-change="selectionsChange">
      <div slot="btn">
        <c-upload ref="cUpload" v-model="fileList" type-code="ACCESS018" style="display:inline-block;margin-right:5px;" @upload-success="changeHandle" @remove="removeFileHandle">
          <c-button slot="trigger" type="primary">上传合同</c-button>
        </c-upload>
        <div style="display:inline-block;" @click.stop>
          <c-button type="primary" @click="saveHandle">保存</c-button>
          <c-button type="primary" @click="removeHandle">删行</c-button>
          <c-button @click="cancelHandle">取消</c-button>
        </div>
      </div>
    </c-table-box>
  </c-dialog>
</template>
<script>
import { postContractParsing, postShopAttachmentBat } from '@/api/decorate'
export default {
  name: 'Contract',
  components: {
  },
  data() {
    return {
      fileList: [],
      tableData: [],
      selections: [],
      tableConfig: {
        interfacePath: '',
        setting: [
          {
            prop: '',
            label: '合同',
            render: (h, row) => {
              return h('c-accessory', {
                props: {
                  src: row.attachmentUrl,
                  type: row.typeName
                }
              })
            },
            minWidth: 120
          },
          {
            prop: 'attachmentName',
            label: '合同名称',
            minWidth: 150
          },
          {
            prop: 'typeName',
            label: '格式',
            minWidth: 100
          },
          {
            prop: 'attachmentUrl',
            label: '图片url',
            minWidth: 150
          },
          {
            prop: 'decorationTaskCode',
            width: 200,
            label: '装修任务号',
            minWidth: 170
          },
          {
            prop: 'shopName',
            label: '所属门店',
            minWidth: 150
          },
          {
            prop: 'constUnitName',
            label: '施工单位',
            minWidth: 150
          }
        ]
      }
    }
  },
  methods: {
    selectionsChange(v) {
      this.selections = v
    },
    saveHandle() {
      const files = []
      const configAttachmentId = (this.$refs.cUpload.fileTemplateData[0] || {}).id
      for (const item of this.tableData) {
        files.push({
          createBy: item.createBy,
          modelId: item.modelId,
          remark: '合同',
          typeName: item.typeName,
          configAttachmentId,
          attachmentName: item.attachmentName, // 附件名称
          attachmentType: item.attachmentType, // 附件类型
          attachmentUrl: item.attachmentUrl // 附件地址
        })
      }
      return postShopAttachmentBat(files).then(res => {
        this.$message.success('操作成功！')
        this.$emit('on-success')
        this.$refs.dialog.visible = false
      })
    },
    removeHandle() {
      if (!this.singleJudge(this.selections, '删除')) {
        return
      }
      const t = this.selections.map(e => e.id)
      const data = []
      for (let i = 0; i < this.tableData.length; i++) {
        const item = this.tableData[i]
        if (!t.includes(item.id)) {
          data.push(item)
        }
      }
      this.tableData = data
      this.selections = []
    },
    cancelHandle() {
      this.$refs.dialog.visible = false
    },
    changeHandle(response, file, fileList) {
      const d = response.data
      postContractParsing([d]).then(res => {
        const data = res.data
        this.tableData.push({
          ...(data[d.attachmentName] || {}),
          ...(data.dataList[0])
        })
      })
    },
    removeFileHandle(file) {
      for (const f of file) {
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].id === f.id) {
            this.tableData.splice(i, 1)
            return
          }
        }
      }
    },
    closeHandle() {
      this.selections = []
      this.tableData = []
      this.fileList = []
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-container{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  &>div{
    margin-left: 10px;
  }
  /deep/ .container{
    min-height: auto;
  }
}
</style>
